<template>
    <div>
        <el-card class="card">
            <template #header>
                <div class="section-title">
                    基本信息
                </div>
            </template>
            <div class="form">
                <el-form ref="dwxxForm" label-width="150" :model="form" :rules="rules">
                    <el-form-item label="统一社会信用代码" prop="organizationCode">
                        <el-input v-model="form.organizationCode" style="width: 400px;" />
                        <span style="margin-left: 10px;color: #FF473E;">注：请输入组织机构代码,请确保数据真实准确</span>
                    </el-form-item>
                    <el-form-item label="单位名称" prop="name">
                        <el-input v-model="form.name" style="width: 400px;" />
                        <span style="margin-left: 10px;color: #FF473E;">注：请输入单位全称；例如：xx市机关事务服务中心</span>
                    </el-form-item>
                    <el-form-item label="单位负责人" prop="leader">
                        <el-input v-model="form.leader" style="width: 400px;" />
                        <span style="margin-left: 10px;color: #FF473E;">注：单位负责人为填报单位法定代表人</span>
                    </el-form-item>
                    <el-form-item label="单位类别" prop="unitType">
                        <el-select v-model="form.unitType" placeholder="请选择" style="width: 400px">
                            <el-option v-for="item in lbList" :key="item.id" :label="item.name" :value="item.id" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="单位性质" prop="nature">
                        <el-select v-model="form.nature" placeholder="请选择" style="width: 400px">
                            <el-option v-for="item in xzList" :key="item.id" :label="item.name" :value="item.id" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="详细地址" prop="address">
                        <el-input v-model="form.address" style="width: 400px;" />
                        <span style="margin-left: 10px;color: #FF473E;">注：填写时请详细到街道门牌</span>
                    </el-form-item>
                    <el-form-item label="所属职级分类" prop="rank">
                        <el-select v-model="form.rank" placeholder="请选择" style="width: 400px;" disabled>
                            <el-option v-for="item in zjList" :key="item.id" :label="item.name" :value="item.id" />
                        </el-select>
                        <span style="margin-left: 10px;color: #FF473E;">注：该信息项初始化无法更改</span>
                    </el-form-item>
                    <div class="section-title" style="border-bottom:1px solid #e4e7ed;margin: 36px 0;">
                        填报人信息
                    </div>
                    <el-form-item label="数据填报人" prop="dataReportStaff">
                        <el-input v-model="form.dataReportStaff" style="width: 400px;" />
                        <span style="margin-left: 10px;color: #FF473E;">注：数据填报人为系统当前登录用户</span>
                    </el-form-item>
                    <el-form-item label="联系方式" prop="contact">
                        <el-input v-model="form.contact" style="width: 400px;" />
                        <span style="margin-left: 10px;color: #FF473E;">注：请输入正确的电话号码</span>
                    </el-form-item>
                    <el-form-item label="联系人职务" prop="contactJob">
                        <el-input v-model="form.contactJob" style="width: 400px;" />
                        <span style="margin-left: 10px;color: #FF473E;">注：请输入真实职务</span>
                    </el-form-item>
                    <el-form-item>
                        <el-button style="margin-left: 100px;" type="primary" @click="onSubmit">保存</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-card>
    </div>
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue'
import { useUserStore } from '@/pinia/modules/user'
import { useStorage } from '@vueuse/core'
import {
    getDyList
} from '@/api/xitongpeizhi'
import {
    unitBaseInfo,
    unitSaveInfo
} from '@/api/unit'
import {
  getZjList
} from '@/api/xitongpeizhi'
import { ElMessage, ElMessageBox, useFormItem } from 'element-plus'
const userStore = useUserStore()

defineOptions({
    name: 'Dashboard'
})
const rules = reactive({
    name: [{ required: true, message: '请输入单位名称', trigger: 'blur' }],
    organizationCode: [{ required: true, message: '请输入统一社会信用代码', trigger: 'blur' }],
    leader: [{ required: true, message: '请输入单位负责人', trigger: 'blur' }],
    address: [{ required: true, message: '请输入详细地址', trigger: 'blur' }],
    unitType: [{ required: true, message: '请选择单位类别', trigger: 'change' }],
    nature: [{ required: true, message: '请选择单位性质', trigger: 'change' }],
    dataReportStaff: [{ required: true, message: '请输入数据填报人', trigger: 'blur' }],
    contact: [{ required: true, message: '请输入联系方式', trigger: 'blur' }],
    contactJob: [{ required: true, message: '请输入联系人职务', trigger: 'blur' }],
})

const dwxxForm = ref(null)
const xzList = ref([])
const lbList = ref([])
const form = ref({
    name: '',
    organizationCode: '',
    leader: '',
    address: '',
    unitType: '',
    nature: '',
    dataReportStaff: '',
    contact: '',
    contactJob: ''
})
const unitInfo = ref({})
const zjList = ref([])
onMounted(() => {
    getDyList({ pageNumber: 1, pageSize: 100 }).then(res => {
        xzList.value = res.result.data.filter(item => item.type == 1)
        lbList.value = res.result.data.filter(item => item.type == 2)
        unitBaseInfo().then(res => {
            form.value = res.result
            form.value.unitId = form.value.id
        })
    })
    getZjList({ pageNumber: 1, pageSize: 100 }).then(res => {
        zjList.value = res.result.data
    })
})
const onSubmit = () => {
    dwxxForm.value.validate(async (valid) => {
        if (valid) {
            let res = await unitSaveInfo(form.value)
            if (res.code == 200) {
                ElMessage({
                    type: 'success',
                    message: '保存成功!'
                })
                //getTableData()
            }
            //initForm()
            //dialogFormVisible.value = false
        }
    })
    //unitSaveInfo
}
</script>

<style lang="scss" scoped>
.section-title {
    font-weight: bold;
    font-size: 18px;
    line-height: 33px;
    padding-left: 14px;
    color: #4E7DF7;
    position: relative;
}

.section-title:before {
    content: '';
    position: absolute;
    top: 10px;
    left: 0;
    width: 6px;
    height: 14px;
    border-radius: 3px;
    background: #4E7DF7;
}
</style>